﻿<template>
  <div>
    <!-- 使用 v-for 渲染列表，不使用 :key -->
    <h2>不使用 Key 的消息列表</h2>
    <ul>
      <li v-for="item in itemsNoKey">
        {{ item.message }}
      </li>
    </ul>
    <button @click="shuffleItems(itemsNoKey)">打乱不使用Key的列表</button>

    <!-- 使用 v-for 渲染列表，使用 :key -->
    <h2>使用 Key 的消息列表</h2>
    <ul>
      <li v-for="item in itemsWithKey" :key="item.id">
        {{ item.message }}
      </li>
    </ul>
    <button @click="shuffleItems(itemsWithKey)">打乱使用Key的列表</button>

    <!-- 现有其他列表和功能 -->
    <!-- 使用 v-for 与 index -->
    <h2>带序号和父消息的列表</h2>
    <ul>
      <li v-for="(item, index) in itemsWithKey" :key="`index-${index}`">
        {{ parentMessage+"j" }} - {{ index+2 }} - {{ item.message }} - Key: index-{{ index }}
      </li>
    </ul>

    <!-- 使用 v-for 遍历对象的所有属性 -->
    <h2>对象属性遍历</h2>
    <ul>
      <li v-for="(value, key, index) in myObject" :key="`key-${index}`">
        {{ index }}. {{ key }}: {{ value }}
      </li>
    </ul>

    <!-- 使用 v-for 渲染一个范围 -->
    <h2>数字范围渲染</h2>
    <div>
      <span v-for="n in 10" :key="n">{{ n }}</span>
    </div>

    <!-- 在 <template> 上使用 v-for -->
    <h2>使用 template 标签渲染列表</h2>
    <ul>
      <template v-for="item in itemsWithKey" :key="`template-${item.id}`">
        <li>{{ item.message }}</li>
        <li class="divider" role="presentation"></li>
      </template>
    </ul>

    <!-- 使用 v-for 在组件上 -->
    <h2>组件列表渲染</h2>
    <MyComponent
        v-for="(item, index) in itemsWithKey"
        :item="item"
        :index="index"
        :key="item.id"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '父级消息',
      itemsNoKey: [
        { id: 1, message: 'Foo' },
        { id: 2, message: 'Bar' },
        { id: 3, message: 'zoo' }
      ],
      itemsWithKey: [
        { id: 1, message: 'Foo' },
        { id: 2, message: 'Bar' },
        { id: 3, message: 'zoo' }
      ],
      myObject: {
        title: '如何在Vue中使用列表',
        author: 'Jane Doe',
        publishedAt: '2024-04-10'
      }
    }
  },
  components: {
    MyComponent: {
      props: ['item', 'index'],
      template: `<li>{{ index }}: {{ item.message }}</li>`
    }
  },
  methods: {
    shuffleItems(items) {
      for (let i = items.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [items[i], items[j]] = [items[j], items[i]]; // ES6 解构赋值进行交换
      }
    }
  }
}
</script>

<style scoped>
h2 {
  color: red; /* 设置h2标签的颜色为红色 */
}

li {
  list-style-type: none;
  margin-bottom: 10px;
}

button {
  margin-top: 10px;
  cursor: pointer;
}
</style>
